<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .imgDiv{
      background-image: url("../../img/6.jpg");
      width: 200px;
      height: 200px;
      background-size: 200px 200px;
      transition: all 1s;
    }
    #imageDiv:hover{
      background-image: url("../../img/7.jpg");
      border-radius: 100px;
    }

    #testDiv{
     transform: rotate(30deg);
    }
  </style>
</head>
<body>
  <div class="imgDiv" id="imageDiv"></div>
  <div class="imgDiv" id="testDiv"></div>

  <div style="border: 1px solid #000;width: 500px;height: 1000px;">
    <span style="position: relative;left: 10px;top:10px;">现在疫情在新都出现</span>
    <span>疫情防控任务还很坚巨</span>
    <div style="background-color: red;width: 100px;height: 150px;position: fixed;left: 50px;top:50px;z-index: 2">
    </div>
    <div style="background-color: blue;width: 100px;height: 150px;position: absolute;left: 100px;top: 100px;z-index: 3"></div>
  </div>

  <ul style="display: flex">
    <li>dd</li>
    <li>ee</li>
    <li>xx</li>
    <li>qq</li>
    <li>yy</li>
  </ul>
</body>
</html>
